<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Dashboard">
  <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

  <title>花生手机-手机管理</title>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
  <!-- Bootstrap core CSS -->
  <link th:href="@{assets/css/bootstrap.css}" rel="stylesheet">
  <!--external css-->
  <link th:href="@{assets/font-awesome/css/font-awesome.css}" rel="stylesheet" />

  <!-- Custom styles for this template -->
  <link th:href="@{assets/css/style.css}" rel="stylesheet">
  <link th:href="@{assets/css/style-responsive.css}" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/assets/js/fancybox/jquery.fancybox.css}">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>

<section id="container" >
  <!-- **********************************************************************************************************************************************************
  TOP BAR CONTENT & NOTIFICATIONS
  *********************************************************************************************************************************************************** -->
  <!--header start-->
  <div th:insert="~{public::nav}"></div>
  <!--header end-->

  <!-- **********************************************************************************************************************************************************
  MAIN SIDEBAR MENU
  *********************************************************************************************************************************************************** -->
  <!--sidebar start-->
  <div th:insert="~{public::left}"></div>
  <!--sidebar end-->

  <!-- **********************************************************************************************************************************************************
  MAIN CONTENT
  *********************************************************************************************************************************************************** -->
  <!--main content start-->
  <section id="main-content">
    <section class="wrapper site-min-height">
      <h3><i class="fa fa-angle-right"></i> 商品管理 </h3>
      <div class="row mt">
        <div class="col-md-12">
          <div class="content-panel">
            <div id="page-inner" th:fragment="phones">
              <form th:action="@{/management-phones}" method="get">
                <div class="input-group col-md-3" style="margin-bottom: 30px">
                  <input type="text" class="form-control col-md-3" placeholder="请输入字段名"  list="brand" name="keyword" autocomplete="off" th:value="${keyword}" id="keyword"/>
                  <span class="input-group-btn">
                      <button type="submit" class="btn btn-info btn-search">查找</button>
                      <button type="button" class="btn btn-info btn-search" style="margin-left:3px" data-toggle="modal" data-target="#myModa2">添加</button>
                 </span>
                  <datalist id="brand">
                    <option th:each="brand:${brands}" th:value="${brand.getPbName()}"></option>
                  </datalist>
                </div>
              </form>
            <div class='row' style="color: black">
              <div class='col-md-4 col-sm-4' th:each="phone:${phones}">
                <div class='panel panel-info' style="background:rgb(232,204,120);">
                  <div class='panel-heading'><span th:text="${phone.getpName()}"></span><span>([[${phone.getPhoneBrand().getPbName()}]])</span></div>
                  <div class='panel-body'>
                    <a class="fancybox" th:each="picture:${phone.getPhonePictures()}" th:href="${picture.getPicAddress()}"><img th:src="${picture.getPicAddress()}" style="height:85px;width:85px;"></a>
                    <p style="width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" th:title="${phone.getpDescription()}" th:text="${phone.getpDescription()}"></p>
                    <div>价格：<span th:text="${phone.getpPrice()}"></span>元</div>
                    <div>数量：<span th:text="${phone.getpResidue()}"></span></div>
                    <div>销售量：<span th:text="${phone.getpSales()}"></span></div>
                    <div>手机状态：<span th:text="${phone.getpStatus() == 0 ? '下架':'上架'}"></span></div>
                  </div>
                  <div class='panel-footer' style='text-align: right;'>
                    <a type='button' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#myModal' th:onclick="'javascript:update('+${phoneStat.index}+')'">修改</a>
                  </div>
                </div>
              </div>
            </div>
            </div>
              <div class="row text-right" style="margin-right: 30px">
                <ul class="pagination" id="page">
                </ul>
              </div>
          </div><!-- /content-panel -->
        </div><!-- /col-md-12 -->
      </div><!-- /row -->
    </section><! --/wrapper -->
  </section><!-- /MAIN CONTENT -->
</section>
<!-- 修改 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="margin-top: 100px;">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">修改手机信息</h4>
      </div>
      <div class="modal-body">
        <form method="post" id="updateForm">
          <input type="hidden" name="_method" value="PUT">
          <div class="form-group">
            <label for="updateName">手机名称</label>
            <input type="text" class="form-control" id="updateName" disabled="disabled" name="name">
          </div>
          <div class="form-group">
            <label for="updateBrand">手机类型</label>
            <input type="text" class="form-control" id="updateBrand" disabled="disabled" name="brand">
          </div>
          <div class="form-group">
            <label for="updatePrice">手机价格(元)</label>
            <input type="text" class="form-control" id="updatePrice" name="price">
          </div>
          <div class="form-group">
            <label for="updateReside">手机数量</label>
            <input type="number" class="form-control" id="updateReside" min="0" name="residue">
          </div>
          <div class="form-group">
            <label for="updateContext">手机描述</label>
            <textarea class="form-control" name="description" id="updateContext" cols="30" rows="10"></textarea>
          </div>
          <div class="form-group">
            <label for="updateStatus">手机状态</label>
            <select name="status" id="updateStatus" class="form-control">
              <option selected>上架</option>
              <option>下架</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
                data-dismiss="modal">关闭</button>
        <button class="btn btn-primary" data-dismiss="modal" id="update">修改</button>
      </div>
    </div>
  </div>
</div>
<!-- 添加 -->
<div class="modal fade" id="myModa2" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabe2">添加手机商品</h4>
      </div>
      <div class="modal-body">
        <form th:action="@{/management-phones}" method="post" enctype="multipart/form-data" id="addForm" accept-charset="UTF-8">
          <div class="form-group">
            <div id="show">
            </div>
            <label for="InputFile">上传图片</label>
            <input type="file" name="file" id="InputFile" multiple="multiple" onchange="getFile()" accept="image/*"/>
          </div>
          <div class="form-group">
            <label for="InputName">手机名称</label>
            <input type="text" class="form-control" id="InputName" name="name" autocomplete="off">
          </div>
          <div class="form-group">
            <label for="InputBrand">手机类型</label>
            <select id="InputBrand" class="form-control" name="brand">
              <option th:each="brand:${brands}" th:text="${brand.getPbName()}"></option>
            </select>
          </div>
          <div class="form-group">
            <label for="InputPrice">手机价格</label>
            <input type="text" class="form-control" id="InputPrice" name="price">
          </div>
          <div class="form-group">
            <label for="InputResidue">手机数量</label>
            <input type="number" class="form-control" id="InputResidue" min="1" name="residue">
          </div>
          <div class="form-group">
            <label for="InputContext">手机描述</label>
            <textarea class="form-control" name="description" id="InputContext" cols="30" rows="5"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
                data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="add">添加</button>
      </div>
    </div>
  </div>
</div>
<!-- js placed at the end of the document so the pages load faster -->
<script th:src="@{assets/js/jquery.js}"></script>
<script th:src="@{assets/js/bootstrap.min.js}"></script>
<script th:src="@{assets/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{assets/js/jquery.ui.touch-punch.min.js}"></script>
<script class="include" type="text/javascript" th:src="@{assets/js/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{assets/js/jquery.scrollTo.min.js}"></script>
<script th:src="@{assets/js/common-scripts.js}"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:src="@{assets/js/fancybox/jquery.fancybox.js}"></script>
<script type="text/javascript" th:inline="javascript">
  var currentPage = [[${currentPage}]];	//当前页
  var totalPages = [[${totalPages}]];
  var phones = [[${phones}]];
  $("#page").bootstrapPaginator({
    bootstrapMajorVersion:3, 	//对应的bootstrap版本
    currentPage: currentPage, 		//当前页数
    numberOfPages: 6, 		//每次显示页数
    totalPages:totalPages, 	//总页数
    shouldShowPage:true,	//是否显示该按钮
    useBootstrapTooltip:true,
    //点击事件
    onPageClicked: function (event, originalEvent, type, page) {
      var keyword = $("#keyword").val();
      localRefresh(page,keyword);
    }
//    pageUrl: function(type, page, current){
//      if (page==current) {
//        return "javascript:void(0)";
//      } else {
//        var keyword = $("#keyword").val();
//        return "/management-phones?page="+page+"&keyword="+keyword;
//      }
//    }
  });
  function update(index) {
    var phone = phones[index];
    $("#updateName").val(phone.pName);
    $("#updateBrand").val(phone.phoneBrand.pbName);
    $("#updatePrice").val(phone.pPrice);
    $("#updateReside").val(phone.pResidue);
    $("#updateContext").text(phone.pDescription);
    $("#updateForm").attr("action","/management-phones/"+phone.pId);
  }
  $("#update").click(function () {
    $("#updateForm").submit();
  })
  function getFile() {
    var file = document.querySelector("#InputFile").files;
    var str = "<div id='show'>";
    for (var i = 0; i < file.length; i++) {
      var src = window.URL.createObjectURL(file[i]);
      str += "<img src='"+src+"'style='width:100px;margin:10px'>"
    }
    str += "</div>";
    $("#show").replaceWith(str);
  }
  $("#add").click(function () {
    $("#addForm").submit();
  })
</script>
<script type="text/javascript">
  $(function() {
    //    fancybox
    jQuery(".fancybox").fancybox();
  });
  function localRefresh(page,keyword) {
    // 装载局部刷新返回的页面
    $('#page-inner').load("/phones?page="+page+"&keyword="+keyword);
  }
</script>
</body>
</html>